<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <title>
            阳光成单系统
        </title>
        
         <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
         <script src="../../js/layui/layui.js"></script>

    </head>
    <body>
    <!-- 修改表单 -->
     <form class="layui-form"  action="" lay-filter="updateForm" id="updateForm" style="display:none; width: 600px">
		<input type="hidden" name="product_id" />
		  <div class="layui-form-it">
    <label class="layui-form-label">商品名</label>
    <div class="layui-input-block">
      <input type="text" name="product_name" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">价格</label>
    <div class="layui-input-block">
      <input type="text" name="product_price" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">折扣价</label>
    <div class="layui-input-block">
      <input type="text" name="product_discountprice" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
       <div class="layui-inline">
      <label class="layui-form-label">发货时间</label>
      <div class="layui-input-inline">
        <input type="text" name="product_deliveryTime" id="date1"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
      </div>
    </div>
  <div class="layui-form-item">
         <label class="layui-form-label">分类</label>
    <div class="layui-input-inline">
      <select  name="product_id_type" class="getType">
        <option value=""></option>
      </select>
    </div>
    </div>
   <div class="layui-form-item">
    <label class="layui-form-label">类型</label>
    <div class="layui-input-block">
      <input type="text" name="product_category" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">风格</label>
    <div class="layui-input-block">
      <input type="text" name="product_style" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">地址</label>
    <div class="layui-input-block">
      <input type="text" name="product_address" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">库存</label>
    <div class="layui-input-block">
      <input type="text" name="product_count" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">图片</label>
    <div class="layui-input-block">
      <input type="text" name="product_img" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">发货</label>
    <div class="layui-input-block">
      <input type="text" name="product_launch" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
   
    <div class="layui-form-item">
         <label class="layui-form-label">是否上架</label>
    <div class="layui-input-inline">
      <select  name="product_isPub" >
        <option value=""></option>
        <option value="是">是</option>
        <option value="否">否</option>
      </select>
    </div>
    </div>
  <div class="layui-form-item">
         <label class="layui-form-label">是否推荐</label>
    <div class="layui-input-inline">
      <select  name="product_canUse" >
        <option value=""></option>
        <option value="是">是</option>
        <option value="否">否</option>
      </select>
    </div>
    </div>
 <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">信息</label>
    <div class="layui-input-block" style="width: 230px">
      <textarea name="product_content" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>

    
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="update">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
    
    <!-- 添加表单 -->
	     <form class="layui-form"  action="" id="addForm" style="display:none; width: 600px">
		  <div class="layui-form-it">
    <label class="layui-form-label">商品名</label>
    <div class="layui-input-block">
      <input type="text" name="product_name" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">价格</label>
    <div class="layui-input-block">
      <input type="text" name="product_price" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">折扣价</label>
    <div class="layui-input-block">
      <input type="text" name="product_discountprice" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
       <div class="layui-inline">
      <label class="layui-form-label">发货时间</label>
      <div class="layui-input-inline">
        <input type="text" name="product_deliveryTime" id="date2"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
      </div>
    </div>
  <div class="layui-form-item">
         <label class="layui-form-label">分类</label>
    <div class="layui-input-inline">
      <select  name="product_id_type" class="getType">
        <option value=""></option>
      </select>
    </div>
    </div>
   <div class="layui-form-item">
    <label class="layui-form-label">类型</label>
    <div class="layui-input-block">
      <input type="text" name="product_category" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">风格</label>
    <div class="layui-input-block">
      <input type="text" name="product_style" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">地址</label>
    <div class="layui-input-block">
      <input type="text" name="product_address" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">库存</label>
    <div class="layui-input-block">
      <input type="text" name="product_count" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">图片</label>
    <div class="layui-input-block">
      <input type="text" name="product_img" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">发货</label>
    <div class="layui-input-block">
      <input type="text" name="product_launch" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
   
    <div class="layui-form-item">
         <label class="layui-form-label">是否上架</label>
    <div class="layui-input-inline">
      <select  name="product_isPub" >
        <option value=""></option>
        <option value="是">是</option>
        <option value="否">否</option>
      </select>
    </div>
    </div>
  <div class="layui-form-item">
         <label class="layui-form-label">是否推荐</label>
    <div class="layui-input-inline">
      <select  name="product_canUse" >
        <option value=""></option>
        <option value="是">是</option>
        <option value="否">否</option>
      </select>
    </div>
    </div>
 <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">信息</label>
    <div class="layui-input-block" style="width: 230px">
      <textarea name="product_content" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>

    
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="add">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
    <!-- 设置推荐位表单 -->
    <form class="layui-form" action="" style="display: none;" lay-filter="tuiJianForm" id="tuiJianForm">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">推荐权重</label>
				<div class="layui-input-inline">
					<input type="text" id="tj_weight" name="tj_weight" lay-verify="required|number"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">推荐商品ID</label>
				<div class="layui-input-inline">
					<input type="text" id="tj_cmdid" name="product_id" lay-verify="required|number"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">推荐商品名</label>
				<div class="layui-input-inline">
					<input type="text" id="tj_content" name="product_name" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">推荐商品位置</label>
			<div class="layui-input-inline">
				<select name="tj_address" id="tj_address">
					<option value="主页a">主页a</option>
					<option value="主页b">主页b</option>
					<option value="主页c">主页c</option>
					
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="submit" class="layui-btn" lay-submit="" lay-filter="tuiJian">确定设置推荐</button>
			</div>
		</div>
	</form>
    <!-- 多条件分页查询 -->
        <div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>产品管理</cite></a>
              <a><cite>商品管理</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
        </div>
        <div class="x-body">
            <form class="layui-form x-center" action="" style="width:100%">
                <div class="layui-form-pane" style="margin-top: 15px;">
                  <div class="layui-form-item">
                  <label class="layui-form-label">商品名：</label>
                    <div class="layui-input-inline" style="width:120px">
                        <input type="text" id="product_name"  placeholder="商品名" autocomplete="off" class="layui-input">
                    </div>
                  <label class="layui-form-label">分类</label>
                    <div class="layui-input-inline" style="width:120px;text-align: left">
                        <select id="product_category" class="getType">
                            <option value=""></option>
                        </select>
                    </div>
                    <label class="layui-form-label">价格</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" id="begin_discountprice" placeholder="￥"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" id="end_discountprice" placeholder="￥"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width:80px">
                        <button class="layui-btn"  lay-submit="" lay-filter="chaxun"><i>&#xe608;</i>查询</button>
                    </div>
                    <div class="layui-input-inline" style="width:80px">
                        <button class="layui-btn"  lay-submit="" lay-filter="addBtn"><i class="layui-icon">&#xe608;</i>增加</button>
                    </div>
                  </div>
                </div> 
            </form>
            <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button><span class="x-right" style="line-height:40px">共有数据：88 条</span></xblock>
            
            <!-- 数据表格 -->
            <table id="demo" lay-filter="test"></table>
            
             
             
     <script type="text/html" id="statusTpl" >
        <!--这里的 d 和上面的是一样的，表示当前行数据-->
        <input type="checkbox" lay-skin="switch"  value={{d.product_id}}  lay-filter="switchTest"  lay-text="是|否" {{ d.product_isPub== "是" ? "checked" : "" }}>
    </script>
        </div>
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script src="./js/x-layui.js" charset="utf-8"></script>
	<script>
            layui.use(['layer','form','table','upload','laydate'], function(){
             var   $ = layui.$,//jquery
              layer = layui.layer,//弹出层
              form = layui.form,
			  table = layui.table,
			  upload = layui.upload,
			  laydate = layui.laydate;
              
              table.render({
            	    elem: '#demo'
            	    ,url: '../../product_Category_ViewAll' //数据接口
            	    ,id:'idTest'
            	    ,page: true //开启分页
            	    ,cols: [[ //表头
            	    	{checkbox: true, fixed: true}
            	      ,{field: 'product_id', title: 'id', fixed: 'left',width:50}
            	      ,{field: 'product_name', title: '商品名' ,width:100}
            	      ,{field: 'product_price', title: '价格',width:50}
            	      ,{field: 'product_discountprice', title: '折扣价',width:80}
            	      //,{field: 'product_deliveryTime', title: '交货时间',width:125}
            	      ,{field: 't_name', title: '分类',width:60}
            	      //,{field: 'product_category', title: '类型'}
            	      //,{field: 'product_style', title: '风格'}
            	      //,{field: 'product_address', title: '发货地址'}
            	      ,{field: 'product_count', title: '剩余产品',width:90}
            	      ,{field: 'product_img', title: '产品图片',width:100,templet:'<div><img src="images/{{d.product_img}}"/></div>'}
            	      ,{field: 'product_launch', title: '上市时间',width:125}
            	      ,{field: 'product_isPub', title: '是否上架', templet: statusTpl,width:100}
            	      ,{field: 'product_content', title: '产品信息'}
            	      ,{fixed: 'right',  align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            	       ]]
            	  });
              
              
              //动态获取下拉框数据
              $.post("../../productTypeType",{},function(res){
            	  for (var i = 0; i < res.length; i++) {
					$(".getType").append(`<option value="${res[i].t_id}">${res[i].t_name}</option>`)					
				}
            	  form.render("select");
              },"json");
              
              //监听查询
              form.on('submit(chaxun)', function(data){
            	  table.reload('idTest', {
            		  url: '../../product_Category_ViewAll'
            		  ,where: {
            			  product_name:$("#product_name").val(),
            			  begin_discountprice:$("#begin_discountprice").val(),
            			  end_discountprice:$("#end_discountprice").val(),
            			  product_category:$("#product_category").val()
            		  } //设定异步数据接口的额外参数
            		  //,height: 300
            		});
                return false;
              });
			//开关事件
			 form.on('switch(switchTest)', function (obj) {
			      var product_isPub = this.checked ? '是' : '否';
			   console.log("product_isPub:" + product_isPub, "product_id:" + this.value);
			   $.post("../../productIspub", {product_id: this.value, product_isPub: product_isPub}, function (data) {
			       if (data) {
			           layer.msg("状态修改成功");
			       } else {
			           layer.msg("状态修改失败");
			       }
			      });
			   });
			
			//设置推荐位
			form.on('submit(tuiJian)', function(data) {
				$.post("../../tuiJianAdd", {
					tj_cmdid:$("#tj_cmdid").val(),
					tj_weight:$("#tj_weight").val(),
					tj_address:$("#tj_address").val(),
					tj_content:$("#tj_content").val()
				}, function(res) {
					if (res.code == "0") {
						layer.closeAll();
						layer.msg('设置成功', {
							icon : 1
						});
						table.reload("idTest");
					} else {
						layer.msg('设置失败', {
							icon : 2
						});
					}
				}, "json");
				return false;
			});

			//工具条事件
			table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				if (layEvent === 'detail') { //推荐位
					form.val("tuiJianForm",data);
					layer.open({
						type : 1,
						content:$("#tuiJianForm")
					})
				} else if (layEvent === 'del') { //删除
					layer.confirm('确定?', {icon: 3, title:'确定要删除吗？'}, function(index){
	           			  $.post("../../productDelete",{product_id:data.product_id},function(res){
	               		if (res.code=="0") {
	  						layer.closeAll();
	  						layer.msg('删除成功', {icon: 1});
	  						table.reload("idTest");
	  					} else {
	  						layer.msg('删除失败', {icon: 2});
		  					}
		               	},"json");
		           	});
				} else if (layEvent === 'edit') { //编辑
					form.val("updateForm", data);
					layer.open({
						type : 1,
						content : $("#updateForm")
					})
				}
			});

			form.on('submit(update)', function(data) {
				$.post("../../productUpdate", $("#updateForm")
						.serialize(), function(res) {
					if (res.code == "0") {
						layer.closeAll();
						layer.msg('修改成功', {
							icon : 1
						});
						table.reload("idTest");
					} else {
						layer.msg('修改失败', {
							icon : 2
						});
					}
				}, "json");
				return false;
			});

			form.on('submit(add)', function(data) {
				$.post("../../productAdd", $("#addForm")
						.serialize(), function(res) {
					if (res.code == "0") {
						layer.closeAll();
						layer.msg('添加成功', {
							icon : 1
						});
						table.reload("idTest");
					} else {
						layer.msg('添加失败', {
							icon : 2
						});
					}
				}, "json");
				return false;
			});
			form.on('submit(addBtn)', function(data) {
				layer.open({
					type : 1,
					content : $("#addForm")
				})
				return false;
			});

			//日期时间选择器
			laydate.render({
				elem : '#date1',
				type : 'datetime'
			});
			laydate.render({
				elem : '#date2',
				type : 'datetime'
			});

			//批量删除提交
			function delAll() {
				layer.confirm('确认要删除吗？', function(index) {
					//捉到所有被选中的，发异步进行删除
					layer.msg('删除成功', {
						icon : 1
					});
				});
			}
		})
	</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">设置推荐位</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>